/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
  <div class="hello-5">
    <van-tabbar class="hello-5-all" v-model="active" active-color="#37CD86" inactive-color="#999999">

      <van-tabbar-item class="hello-5-bottom" replace to="/Homepage" icon>
        <!-- <router-link to="/"> -->
        <span>首页</span>
        <img class="Size" slot="icon" slot-scope="props" :src="props.active ? icon1[0].active : icon1[0].inactive" />
      </van-tabbar-item>

      <van-tabbar-item class="hello-5-bottom" replace to="/Foster" icon="Foster">
        <span>认养</span>
        <img class="Size" slot="icon" slot-scope="props" :src="props.active ? icon2[0].active : icon2[0].inactive" />
      </van-tabbar-item>
      <van-tabbar-item class="hello-5-bottom" replace to="/Live" icon="Live">
        <span>直播</span>
        <img class="Size" slot="icon" slot-scope="props" :src="props.active ? icon3[0].active : icon3[0].inactive" />
      </van-tabbar-item>
      <van-tabbar-item class="hello-5-bottom" replace to="/Store" icon="Store">
        <span>认购</span>
        <img class="Size" slot="icon" slot-scope="props" :src="props.active ? icon4[0].active : icon4[0].inactive" />
      </van-tabbar-item>
      <van-tabbar-item class="hello-5-bottom" replace to="/HamDivision" icon="HamDivision">
        <span>我的</span>
        <img class="Size" slot="icon" slot-scope="props" :src="props.active ? icon5[0].active : icon5[0].inactive" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import https from "./https.js";
export default {
  name: "tabBar",
  data() {
    return {
      active: this.logeid,
      icon1: [
        {
          active: require("../assets/images/t1.png"),
          inactive: require("../assets/images/t2.png")
        },
        {
          active: "",
          inactive: ""
        }
      ],
      icon2: [
        {
          active: require("../assets/images/t8.png"),
          inactive: require("../assets/images/t7.png")
        },
        {
          active: "",
          inactive: ""
        }
      ],
      icon3: [
        {
          active: require("../assets/images/t6.png"),
          inactive: require("../assets/images/t5.png")
        },
        {
          active: "",
          inactive: ""
        }
      ],
      icon4: [
        {
          active: require("../assets/images/t10.png"),
          inactive: require("../assets/images/t9.png")
        },

        {
          active: "",
          inactive: ""
        }
      ],
      icon5: [
        {
          active: require("../assets/images/t4.png"),
          inactive: require("../assets/images/t3.png")
        },
        {
          active: "",
          inactive: ""
        }
      ]
    };
  },
  // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
  // props 中的数据，都是只读的，无法重新赋值
  props: ["logeid"], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据

  created() {
    // console.log(this.logeid);
  },
  beforeMount() {
    // console.log(this.logeid);
  },

  mounted() {
    this.MockRequestApi(
      "api/pigList",
      "",
      this.icon1,
      this.icon2,
      this.icon3,
      this.icon4,
      this.icon5,
      ""
    );
  },
  methods: {
    homeFn() {
      this.active = 0;
    },
    FosterFn() {
      this.active = 1;
    },
    LiveFn() {
      this.active = 2;
    },
    StoreFn() {
      this.active = 3;
    },
    HamDivisionFn() {
      this.active = 4;
    },

    //请求模拟数据
    //MockRequestApi  模拟数据接口
    MockRequestApi(
      Url,
      Params,
      icon1Name,
      icon2Name,
      icon3Name,
      icon4Name,
      icon5Name,
      Urlimg
    ) {
      https
        .fetchGet(Url, Params)
        .then(res => {
          //console.log(res);
          let newData = res.data.data;
          switch (newData.code) {
            case 1001:
              console.log("查询成功!");
              console.log(newData.result);

              for (let i = 0; i < newData.result.length; i++) {
                console.log(newData.result[0]);
                if (i == 4) {
                  //icon1
                  console.log(icon1Name);
                  for (let j = 0; j < newData.result[i].icon1.length; j++) {
                    let icon1 = newData.result[i].icon1;
                    (icon1Name[0].active = require("../assets/images/" +
                      icon1[j].active +
                      ".png")),
                      (icon1Name[0].inactive = require("../assets/images/" +
                        icon1[j].inactive +
                        ".png"));
                    // icon1Name.push({
                    //   active: require("../assets/images/" +
                    //     icon1[j].active +
                    //     ".png"),
                    //   inactive: require("../assets/images/" +
                    //     icon1[j].inactive +
                    //     ".png")
                    // });

                    console.log(icon1Name);
                  }

                  //icon2
                  for (let j = 0; j < newData.result[i].icon2.length; j++) {
                    let icon2 = newData.result[i].icon2;
                    (icon2Name[0].active = require("../assets/images/" +
                      icon2[j].active +
                      ".png")),
                      (icon2Name[0].inactive = require("../assets/images/" +
                        icon2[j].inactive +
                        ".png"));
                  }

                  //icon3
                  for (let j = 0; j < newData.result[i].icon3.length; j++) {
                    let icon3 = newData.result[i].icon3;
                    (icon3Name[0].active = require("../assets/images/" +
                      icon3[j].active +
                      ".png")),
                      (icon3Name[0].inactive = require("../assets/images/" +
                        icon3[j].inactive +
                        ".png"));
                  }

                  //icon4
                  for (let j = 0; j < newData.result[i].icon4.length; j++) {
                    let icon4 = newData.result[i].icon4;
                    (icon4Name[0].active = require("../assets/images/" +
                      icon4[j].active +
                      ".png")),
                      (icon4Name[0].inactive = require("../assets/images/" +
                        icon4[j].inactive +
                        ".png"));
                  }

                  //icon5
                  for (let j = 0; j < newData.result[i].icon5.length; j++) {
                    let icon5 = newData.result[i].icon5;
                    (icon5Name[0].active = require("../assets/images/" +
                      icon5[j].active +
                      ".png")),
                      (icon5Name[0].inactive = require("../assets/images/" +
                        icon5[j].inactive +
                        ".png"));
                  }
                }
              }

              break;
            case 1002:
              console.log("查询失败1!");
              break;
            default:
              console.log("错误1!");
              break;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //上拉加载
    onRefresh() {
      // this.$toast.loading({
      //   message: "加载中...",
      //   duration: 30000
      // });
      setTimeout(() => {
        // this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
        this.goods();
      }, 500);
    }
  }
};
</script>

<style scoped>
.hello-5 {
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
  margin: auto;
  background: #fff;
}
.hello-5-all {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.hello-5-bottom {
  width: 20%;
  display: flex;
}

.Size {
  width: 25.984px;
  height: 25.984px;
}
</style>


